<template>
  <div>
    <div class="main-box">
      <div class="main-le fl">
        <div class="home-column">
          <span class="fr" @click="dynamic()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="沪佛动态" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="news-list">
          <dl v-for="(item, index) in hufodongtai" @click="gotodetails(item)" v-if='index<=5' :key="item.index">
            <dt @click="gotodetails(item)">
              <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="140" height="106" alt=""></a>
            </dt>
            <dd>
              <h3>
                <a @click="gotodetails(item)">{{item.title}}</a>
              </h3>
              <div class="con">{{item.remark}}</div>
            </dd>
          </dl>
        </div>
      </div>
      <div class="main-ri fr">
        <div class="home-column">
          <!-- <span class="fr" @click="aroundLaw()">更多 &gt;&gt;</span> -->
          <el-tabs v-model="activeName">
            <el-tab-pane label="音频视频" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="his-list">
          <div class="error">系统维护中。。。。。。</div>
          <!-- <dl v-for="(item, index) in gedifaxun" @click="gotodetails(item)" v-if='index<=0' :key="item.index">
            <dt @click="gotodetails(item)">
              <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="120" height="80" alt=""></a>
            </dt>
            <dd>
              <h3 @click="gotodetails(item)">
                <a>{{item.title}}</a>
              </h3>
              <div class="con">{{item.remark.substr(0,50)}}
                <a @click="gotodetails(item)" class="more">[详情]</a>
              </div>
            </dd>
          </dl>
          <div class="lists">
            <ul>
              <li v-for="(item, index) in gedifaxun" @click="gotodetails(item)" v-if='index<=6  && index!=0' :key="item.index">
                <a @click="gotodetails(item)">{{item.title}}</a>
              </li>
            </ul>
          </div> -->
        </div>
        <div class="home-column">
          <span class="fr" @click="lookWorld()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="放眼世界" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="his-list">
          <dl v-for="(item, index) in fangyanshijie" @click="gotodetails(item)" v-if='index<=0' :key="item.index">
            <dt @click="gotodetails(item)">
              <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="120" height="80" alt=""></a>
            </dt>
            <dd>
              <h3 @click="gotodetails(item)">
                <a>{{item.title}}</a>
              </h3>
              <div class="con">{{item.remark.substr(0,50)}}
                <a @click="gotodetails(item)" class="more">[详情]</a>
              </div>
            </dd>
          </dl>
          <div class="lists">
            <ul>
              <li v-for="(item, index) in fangyanshijie" @click="gotodetails(item)" v-if='index<=6  && index!=0' :key="item.index">
                <a @click="gotodetails(item)">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      request: {
        pageNo: '0',
        pageSize: '10',
        indexType: '3'
      },
      hufodongtai: [],
      gedifaxun: [],
      fangyanshijie: []
    };
  },
  created() {
    this.init();
    this.$parent.activeIndex2 = '3';
  },
  methods: {
    init() {
      this.$http({
        method: 'get',
        url: `http://www.shanghaifoxie.com/web/api/pageIndex`,
        params: this.request
      })
        .then(response => {
          if (response.data !== null) {
            let dataArr = response.data.data.list;
            let arr6 = [];
            let arr7 = [];
            let arr8 = [];
            for (let i = 0; i < dataArr.length; i++) {
              if (dataArr[i].type === 2) {
                // 沪佛动态
                this.hufodongtai = dataArr[i].data;
              }
              if (dataArr[i].type === 6) {
                // console.log(dataArr[i].data.slice(0, 2));
                // 各地法讯
                arr6 = dataArr[i].data.slice(0, 2);
              }
              if (dataArr[i].type === 7) {
                // console.log(dataArr[i].data.slice(0, 2));
                // 各地法讯
                arr7 = dataArr[i].data.slice(0, 2);
              }
              if (dataArr[i].type === 8) {
                // console.log(dataArr[i].data.slice(0, 2));
                // 各地法讯
                arr8 = dataArr[i].data.slice(0, 3);
              }
              if (dataArr[i].type === 9) {
                // 放眼世界
                this.fangyanshijie = dataArr[i].data;
              }
            }
            let arrlist = arr6.concat(arr7);
            this.gedifaxun = arrlist.concat(arr8);
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    handleClick(tab) {
    },
    // 沪佛动态
    dynamic() {
      let type = 2;
      this.$router.push({ path: `/pageList/${type}` });
    },
    // 各地法讯
    aroundLaw() {
      let type = 6;
      this.$router.push({ path: `/pageList/${type}` });
    },
    // 放眼世界
    lookWorld() {
      let type = 9;
      this.$router.push({ path: `/pageList/${type}` });
    },
    gotodetails(item) {
      this.$router.push({ path: `/details/${item.id}` });
    }
  },
  components: {}
};
</script> 

<style lang="less">
.fr {
  float: right;
}
.fl {
  float: left;
}
.main-box {
  height: auto;
  overflow: hidden;
  padding-bottom: 20px;
  .main-le {
    width: 600px;
    .news-list {
      padding-top: 10px;
      dl {
        height: 106px;
        margin: 10px 0;
        width: 100%;
        display: block;
        float: left;
        dt {
          float: left;
          width: 140px;
        }
        dd {
          float: right;
          width: 448px;
          h3 {
            font-size: 18px;
            font-weight: normal;
            color: #000;
            height: 28px;
            line-height: 28px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .con {
              height: 54px;
              line-height: 18px;
              overflow: hidden;
              padding-top: 8px;
            }
          }
        }
      }
    }
  }
  .main-ri {
    width: 380px;
    .his-list {
      .error{
      line-height: 362px;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
    }
      dl {
        height: 80px;
        display: block;
        margin-top: 20px;
        dt {
          width: 120px;
          height: 80px;
          float: left;
        }
        dd {
          width: 248px;
          padding-left: 12px;
          float: left;
          h3 {
            font-size: 18px;
            font-weight: normal;
            line-height: 24px;
          }
          .con {
            line-height: 18px;
            height: 54px;
            overflow: hidden;
            padding-top: 6px;
          }
        }
      }
      .lists {
        padding-top: 8px;
        li {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          position: relative;
          padding-left: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &::before {
            position: absolute;
            left: 0;
            top: 18px;
            content: '';
            width: 4px;
            height: 4px;
            background-color: #dd9b1e;
          }
        }
      }
    }
  }
}
</style>